<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校验插件</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.min.js"></script>
</head>
<body>
<h1>注册用户</h1>
<form action="#" id="formId" method="post">
    <table width="1000px" border="1">
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username" /></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>重复输入密码:</td>
            <td><input type="password" name="repassword"/></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input type="text" name="age"/></td>
        </tr>
        <tr>
            <td>月工资收入:</td>
            <td><input type="text" name="salary"/></td>
        </tr>
        <tr>
            <td>电子邮箱:</td>
            <td><input type="text" name="email"/></td>
        </tr>
        <tr>
            <td>手机号:</td>
            <td><input type="text" name="phone"/></td>
        </tr>

        <tr>
            <td colspan="2">
                <button type="button" id="register">注册</button>
            </td>
        </tr>
    </table>
</form>

</body>
<script>

    $(function(){

        $("#formId").validate({
            onfocusout: function (element) {
                $(element).valid();
            },
            rules:{
                username:{required: true},
                password:{required:true,digits:true},
                repassword:{equalTo:"[name='password']"},
                zxz:{min:3,required:true},
                shuzhiqujian:{range:[5,10],required:true}
            },
            messages:{
                username:"用户名不能为空",
                password:{required:"密码不能为空",digits:"必须输入整数"},
                zxz:{min:"最小值应该大于{0}"},
                shuzhiqujian:{range:"值应该在{0}-{1}之间!"}
            }
        });


    })
</script>
</html>